<template>
  <Container class="wrap-container">
    <div class="banner3 common">
      <div class="title">
        <!-- <div class="num">01</div> -->
        <!-- <img class="serial-number" src="" /> -->
        <div class="number-icon">
          <svg
            width="130"
            height="92"
            viewBox="0 0 130 92"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <mask
              id="path-1-outside-1_122_11"
              maskUnits="userSpaceOnUse"
              x="-2"
              y="-2"
              width="134"
              height="96"
              fill="black"
            >
              <rect fill="white" x="-2" y="-2" width="134" height="96" />
              <path
                d="M29.736 91.408C9.93867 91.408 0.0400004 80.6133 0.0400004 59.024V31.632C0.0400004 21.3067 2.55733 13.4987 7.592 8.20799C12.6267 2.91733 20.008 0.271996 29.736 0.271996C39.6347 0.271996 47.0587 2.91733 52.008 8.20799C56.9573 13.4987 59.432 21.3067 59.432 31.632V59.024C59.432 69.6907 56.9573 77.7547 52.008 83.216C47.0587 88.6773 39.6347 91.408 29.736 91.408ZM29.736 76.816C34.4293 76.816 37.7573 75.3227 39.72 72.336C41.6827 69.264 42.664 64.3573 42.664 57.616V34.064C42.664 27.3227 41.64 22.4587 39.592 19.472C37.6293 16.4853 34.344 14.992 29.736 14.992C25.128 14.992 21.8427 16.4853 19.88 19.472C17.9173 22.4587 16.936 27.3227 16.936 34.064V57.616C16.936 64.3573 17.9173 69.264 19.88 72.336C21.8427 75.3227 25.128 76.816 29.736 76.816ZM72.162 76.688L105.186 41.36C108.002 38.6293 109.965 36.1973 111.074 34.064C112.183 31.8453 112.738 29.456 112.738 26.896V25.488C112.738 22.0747 111.586 19.3867 109.282 17.424C107.063 15.4613 103.991 14.48 100.066 14.48C96.226 14.48 93.1967 15.4187 90.978 17.296C88.7593 19.1733 87.65 21.776 87.65 25.104V27.152H71.65V24.08C71.65 16.8267 74.21 11.0667 79.33 6.8C84.45 2.448 91.4473 0.271996 100.322 0.271996C106.295 0.271996 111.501 1.33866 115.938 3.47199C120.375 5.52 123.746 8.42133 126.05 12.176C128.439 15.9307 129.634 20.24 129.634 25.104V26.768C129.634 31.2907 128.738 35.3867 126.946 39.056C125.154 42.7253 122.381 46.4373 118.626 50.192L94.818 75.28H129.762V90H72.162V76.688Z"
              />
            </mask>
            <path
              d="M7.592 8.20799L6.14317 6.82927L7.592 8.20799ZM52.008 8.20799L53.4685 6.84168H53.4685L52.008 8.20799ZM52.008 83.216L50.526 81.873H50.526L52.008 83.216ZM39.72 72.336L41.3914 73.4344L41.3985 73.4236L41.4054 73.4128L39.72 72.336ZM39.592 19.472L37.9206 20.5704L37.9314 20.5868L37.9425 20.6031L39.592 19.472ZM19.88 19.472L21.5514 20.5704L21.5514 20.5704L19.88 19.472ZM19.88 72.336L18.1946 73.4128L18.2015 73.4236L18.2086 73.4344L19.88 72.336ZM29.736 89.408C20.1923 89.408 13.389 86.8141 8.93807 81.9603C4.45703 77.0736 2.04 69.5513 2.04 59.024H-1.96C-1.96 70.0861 0.572304 78.7557 5.98993 84.6637C11.4376 90.6045 19.4823 93.408 29.736 93.408V89.408ZM2.04 59.024V31.632H-1.96V59.024H2.04ZM2.04 31.632C2.04 21.6068 4.48376 14.3755 9.04083 9.58672L6.14317 6.82927C0.630904 12.6218 -1.96 21.0065 -1.96 31.632H2.04ZM9.04083 9.58672C13.5848 4.81174 20.3663 2.272 29.736 2.272V-1.728C19.6497 -1.728 11.6686 1.02292 6.14317 6.82927L9.04083 9.58672ZM29.736 2.272C39.291 2.272 46.0991 4.81915 50.5475 9.57431L53.4685 6.84168C48.0183 1.0155 39.9784 -1.728 29.736 -1.728V2.272ZM50.5475 9.57431C55.0268 14.3625 57.432 21.5987 57.432 31.632H61.432C61.432 21.0146 58.8879 12.6348 53.4685 6.84168L50.5475 9.57431ZM57.432 31.632V59.024H61.432V31.632H57.432ZM57.432 59.024C57.432 69.4135 55.0193 76.9148 50.526 81.873L53.49 84.559C58.8953 78.5945 61.432 69.9678 61.432 59.024H57.432ZM50.526 81.873C46.0734 86.7862 39.2728 89.408 29.736 89.408V93.408C39.9965 93.408 48.0439 90.5685 53.49 84.559L50.526 81.873ZM29.736 78.816C34.8671 78.816 38.9459 77.1558 41.3914 73.4344L38.0486 71.2376C36.5688 73.4895 33.9916 74.816 29.736 74.816V78.816ZM41.4054 73.4128C43.684 69.8463 44.664 64.462 44.664 57.616H40.664C40.664 64.2526 39.6814 68.6817 38.0346 71.2592L41.4054 73.4128ZM44.664 57.616V34.064H40.664V57.616H44.664ZM44.664 34.064C44.664 27.2172 43.6424 21.8424 41.2415 18.3409L37.9425 20.6031C39.6376 23.0749 40.664 27.4281 40.664 34.064H44.664ZM41.2634 18.3736C38.8249 14.6628 34.7983 12.992 29.736 12.992V16.992C33.8897 16.992 36.4338 18.3078 37.9206 20.5704L41.2634 18.3736ZM29.736 12.992C24.6737 12.992 20.6471 14.6628 18.2086 18.3736L21.5514 20.5704C23.0382 18.3078 25.5823 16.992 29.736 16.992V12.992ZM18.2086 18.3736C15.9131 21.8667 14.936 27.226 14.936 34.064H18.936C18.936 27.4194 19.9215 23.0506 21.5514 20.5704L18.2086 18.3736ZM14.936 34.064V57.616H18.936V34.064H14.936ZM14.936 57.616C14.936 64.462 15.916 69.8463 18.1946 73.4128L21.5654 71.2592C19.9186 68.6817 18.936 64.2526 18.936 57.616H14.936ZM18.2086 73.4344C20.6471 77.1452 24.6737 78.816 29.736 78.816V74.816C25.5823 74.816 23.0382 73.5002 21.5514 71.2376L18.2086 73.4344ZM72.162 76.688L70.7009 75.3222L70.162 75.8988V76.688H72.162ZM105.186 41.36L103.794 39.9242L103.758 39.9584L103.725 39.9942L105.186 41.36ZM111.074 34.064L112.848 34.9867L112.856 34.9726L112.863 34.9584L111.074 34.064ZM109.282 17.424L107.957 18.922L107.971 18.9344L107.985 18.9465L109.282 17.424ZM90.978 17.296L89.6861 15.7692L90.978 17.296ZM87.65 27.152V29.152H89.65V27.152H87.65ZM71.65 27.152H69.65V29.152H71.65V27.152ZM79.33 6.8L80.6104 8.33644L80.6179 8.33019L80.6253 8.32388L79.33 6.8ZM115.938 3.47199L115.071 5.2745L115.086 5.28132L115.1 5.28791L115.938 3.47199ZM126.05 12.176L124.345 13.222L124.354 13.236L124.363 13.2497L126.05 12.176ZM126.946 39.056L125.149 38.1783L126.946 39.056ZM118.626 50.192L117.212 48.7778L117.193 48.7963L117.175 48.8153L118.626 50.192ZM94.818 75.28L93.3673 73.9033L90.1628 77.28H94.818V75.28ZM129.762 75.28H131.762V73.28H129.762V75.28ZM129.762 90V92H131.762V90H129.762ZM72.162 90H70.162V92H72.162V90ZM73.6231 78.0538L106.647 42.7258L103.725 39.9942L70.7009 75.3222L73.6231 78.0538ZM106.578 42.7958C109.464 39.9975 111.597 37.3924 112.848 34.9867L109.3 33.1413C108.332 35.0023 106.54 37.2611 103.794 39.9242L106.578 42.7958ZM112.863 34.9584C114.116 32.453 114.738 29.7562 114.738 26.896H110.738C110.738 29.1558 110.251 31.2377 109.285 33.1696L112.863 34.9584ZM114.738 26.896V25.488H110.738V26.896H114.738ZM114.738 25.488C114.738 21.5725 113.389 18.2954 110.579 15.9015L107.985 18.9465C109.783 20.4779 110.738 22.5768 110.738 25.488H114.738ZM110.607 15.926C107.918 13.5469 104.318 12.48 100.066 12.48V16.48C103.665 16.48 106.209 17.3757 107.957 18.922L110.607 15.926ZM100.066 12.48C95.9067 12.48 92.3681 13.4999 89.6861 15.7692L92.2699 18.8228C94.0253 17.3374 96.5453 16.48 100.066 16.48V12.48ZM89.6861 15.7692C86.9504 18.0841 85.65 21.283 85.65 25.104H89.65C89.65 22.269 90.5683 20.2626 92.2699 18.8228L89.6861 15.7692ZM85.65 25.104V27.152H89.65V25.104H85.65ZM87.65 25.152H71.65V29.152H87.65V25.152ZM73.65 27.152V24.08H69.65V27.152H73.65ZM73.65 24.08C73.65 17.3607 75.9902 12.1866 80.6104 8.33644L78.0496 5.26355C72.4298 9.94675 69.65 16.2927 69.65 24.08H73.65ZM80.6253 8.32388C85.2815 4.36613 91.7678 2.272 100.322 2.272V-1.728C91.1268 -1.728 83.6185 0.529856 78.0347 5.27612L80.6253 8.32388ZM100.322 2.272C106.058 2.272 110.956 3.29592 115.071 5.2745L116.805 1.66949C112.045 -0.618601 106.532 -1.728 100.322 -1.728V2.272ZM115.1 5.28791C119.219 7.18926 122.27 9.84022 124.345 13.222L127.755 11.13C125.222 7.00244 121.531 3.85074 116.776 1.65607L115.1 5.28791ZM124.363 13.2497C126.529 16.6539 127.634 20.5837 127.634 25.104H131.634C131.634 19.8963 130.35 15.2074 127.737 11.1022L124.363 13.2497ZM127.634 25.104V26.768H131.634V25.104H127.634ZM127.634 26.768C127.634 31.0196 126.794 34.8106 125.149 38.1783L128.743 39.9337C130.682 35.9627 131.634 31.5617 131.634 26.768H127.634ZM125.149 38.1783C123.478 41.5993 120.854 45.1351 117.212 48.7778L120.04 51.6062C123.907 47.7395 126.83 43.8513 128.743 39.9337L125.149 38.1783ZM117.175 48.8153L93.3673 73.9033L96.2687 76.6567L120.077 51.5687L117.175 48.8153ZM94.818 77.28H129.762V73.28H94.818V77.28ZM127.762 75.28V90H131.762V75.28H127.762ZM129.762 88H72.162V92H129.762V88ZM74.162 90V76.688H70.162V90H74.162Z"
              fill="url(#paint0_linear_122_11)"
              mask="url(#path-1-outside-1_122_11)"
            />
            <defs>
              <linearGradient
                id="paint0_linear_122_11"
                x1="113"
                y1="-25"
                x2="116.049"
                y2="89.9191"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#172026" />
                <stop offset="0.71" stop-color="#172026" stop-opacity="0" />
              </linearGradient>
            </defs>
          </svg>
        </div>
        <div class="text">{{ $t("content.home.banner3.title") }}</div>
        <div class="en">{{ $t("content.home.banner3.sub_title") }}</div>
      </div>
      <div class="pc-box card_img" v-if="fourCoreData">
        <div class="card_img-item" v-for="item in fourCoreData" :key="item.id">
          <img :src="item.single_pic" alt="" />
          <div class="title">{{ item.title }}</div>
          <div class="hover-content">
            <div class="title">{{ item.title }}</div>
            <div class="introduce">{{ item.descri }}</div>
            <a class="btn btn-white btn-round" @click="openUrl(item.url)">{{
              $t("btnText.view_detail")
            }}</a>
          </div>
        </div>
      </div>
      <div class="pc-box card_img" v-else>
        <div class="card_img-item" v-for="i in 4" :key="i">
          <Skeleton width="302px" height="426px"></Skeleton>
        </div>
      </div>
      <div class="mobile-box" v-if="fourCoreData">
        <Swiper @slideChange="onSlideChange" :loop="true" class="relative">
          <SwiperSlide v-for="(item, idx) in fourCoreData" :key="idx">
            <div class="title">{{ item.title }}</div>
            <div class="divider-line"></div>
            <div class="content">
              <p>{{ item.descri }}</p>
            </div>
            <div class="btn btn-default btn-round" @click="openUrl(item.url)">
              <span>{{ $t("btnText.view_detail") }}</span>
              <i class="iconfont icon-arrow-right"></i>
            </div>
          </SwiperSlide>
          <Banner3SwiperControls
            class="swiper-control"
            :currentIndex="currentIndex"
          />
        </Swiper>
      </div>
      <div class="mobile-skeleton" v-else>
        <div class="header">
          <Skeleton width="500px" height="130px"></Skeleton>
          <Skeleton width="500px" height="130px"></Skeleton>
        </div>
        <div class="divider-line"></div>
        <div class="text">
          <Skeleton :rows="3" mobile></Skeleton>
        </div>
        <div class="btn_">
          <Skeleton width="550px" height="190px" round></Skeleton>
        </div>
      </div>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { postFourCore } from "../../../api/banner";
import Banner3SwiperControls from "./Banner3SwiperControls.vue";
import { computed, ref, onBeforeMount, nextTick, onMounted } from "vue";
import { useCacheStore } from "../../../store";

const cacheStore = useCacheStore();

// 轮播图滚动
const currentIndex = ref(0);
const onSlideChange = (swiper: any) => {
  currentIndex.value = isNaN(swiper.realIndex) ? 0 : swiper.realIndex;
};

const openUrl = (url: string) => {
  let params = url.split("?");
  let querys = params[1].split("&");
  let route_path = params[0].includes("/") ? params[0] : "/" + params[0];
  let query = {};
  querys.forEach((item: string) => {
    let splits = item.split("=");
    let obj = { [splits[0]]: splits[1] };
    Object.assign(query, obj);
  });
  goto(route_path, query);
};
const fourCoreData = ref();
const getFourCoreData = async () => {
  if (cacheStore.homeData.banner3) {
    fourCoreData.value = cacheStore.homeData.banner3;
    return;
  }
  let res = await postFourCore();
  if (res.code === 200) {
    fourCoreData.value = res.data;
    cacheStore.homeData.banner3 = res.data;
  }
};

getFourCoreData();
</script>
<style scoped lang="less">
@import url("./common.less");
@import url("./media-banner3.less");
.mobile-box {
  display: none;
  .swiper-control {
    position: absolute;
    top: 164px;
    right: 0;
    z-index: 9;
    background-color: #f6f8fa;
  }
}
.banner3 {
  & > .title {
    .text {
      color: #172026;
    }
    .en {
      color: #9daab2;
    }
  }
  .card_img {
    gap: 24px;
    .card_img-item {
      flex: 1;
      width: 302px;
      height: 426px;
      &:hover {
        transform: translateY(-32px);
      }
      &:last-child {
        .hover-content {
          .title {
            padding-top: 4px;
          }
        }
      }
      .hover-content {
        background: rgba(61, 136, 242, 0.8);
        padding: 32px;
        .title {
          padding-top: 40px;
          line-height: 38px;
        }
      }
    }
  }
}

.mobile-skeleton {
  margin-top: var(--yd-gap);
  .header {
    display: flex;
    justify-content: space-between;
  }
  .btn_ {
    margin-top: var(--yd-gap);
  }
}
</style>
